<template>
    <div class="agent-review">
        <table-set :tableHeader="tableHeader" @headerSet="headerSet"></table-set>
        <orderStatistics :myInfo ='myInfo'  @getData='getTableData'/>
        <span class="down-execel">
            <Poptip v-model="showFilter" placement="bottom-end">
                <i class="el-icon-search poptip-condition-add"></i>
                <a href="javascript:;" class='poptip-condition-add'>列表查找</a>
                <div slot="content">
                    <Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
                        <i class="el-icon-plus"></i>
                        <a href="javascript:;">添加过滤条件</a>
                        <div slot="content" class="condition-list">
                            <ul>
                                <li
                                    v-for="(item, index) in selectHead"
                                    :key="index"
                                    class='poptip-condition-item'
                                    @click="addFilterCondition(item)">
                                    {{item.label}}
                                </li>
                            </ul>
                        </div>
                    </Poptip>
                    <el-form :model="conditionForm" ref="conditionForm" label-min-width="120px" class="demo-dynamic" @submit.native.prevent>
                        <el-form-item
                            v-for="(condition, index) in conditionForm.condition"
                            :label="condition.label"
                            :key="condition.key"
                            :prop="'condition.' + index + '.value'"
                            :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}">
                            <!-- <el-autocomplete v-if='condition.label === "工作邮箱"' v-model="formAgent.name" :fetch-suggestions="querySearch"
                                :trigger-on-focus="true" placeholder="请选择工作邮箱" @select="handleSelect" size="small">
                            </el-autocomplete> -->

                            <el-select
                                v-if='condition.label === "代理师资格证"'
                                v-model="condition.value"
                                placeholder="请选择是否有代理师资格证"
                                size="small"
                            >
                                <el-option label="有" value="有"></el-option>
                                <el-option label="无" value="无"></el-option>
                            </el-select>
                            <el-date-picker
                                v-model="condition.value"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                size="small"
                                :validate-event='false'
                                v-else-if='condition.label === "申请时间"'>
                            </el-date-picker>
                            <el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForm')"></el-input>
                            <el-button @click.stop="removeDomain(condition)" size="mini">删除</el-button>
                        </el-form-item>
                    </el-form>

                    <div class="btns">
                        <el-button @click="submitsearch('conditionForm')" size="mini">查询</el-button>
                        <el-button @click="resetForm('conditionForm')" size="mini">重置</el-button>
                    </div>
                </div>
            </Poptip>
        </span>
        <el-table
            @sort-change="tableSort"
            :height="tableHeight"
            :data="tableData"
            ref="agent-table"
            v-loading="loading"
            v-if="table_show"
            border
            style="width: 100%"
        >
            <el-table-column label="ID" min-width="60" align="left" v-if='checked99'>
                    show-overflow-tooltip
                <template slot-scope="scope">
                    {{(scope.$index + 1) + (current_page - 1) * per_page}}
                </template>
            </el-table-column>
            <template v-for="(item, index) in tableHeader">
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'name' && item.is_show"
                    min-width="95"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                >
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'nickname' && item.is_show"
                    min-width="95"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                >
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'channelName' && item.is_show"
                    min-width="140"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.channel_agent">{{ scope.row.channel_agent.name }} </span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'phone' && item.is_show"
                    min-width="120"
                    align="left"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'email' && item.is_show"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'organization' && item.is_show"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                    min-width="120"
                >
                    <template slot-scope="scope">
                        {{scope.row.organization | getNullVal}}
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    min-width="120"
                    v-if="item.props == 'experience' && item.is_show"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'work_limit' && item.is_show"
                    min-width="130"
                    align="left"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'register_bank' && item.is_show"
                    min-width="160"
                    align="left"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                >
                <template slot-scope="scope">
					{{scope.row.register_bank || '-'}}
				</template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'bank_card' && item.is_show"
                    min-width="180"
                    align="left"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                >
                <template slot-scope="scope">
					{{scope.row.bank_card || '-'}}
				</template>
                </el-table-column>
                <!-- <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'certificate' && item.is_show"
                    min-width="130"
                    align="left"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.certificate == '是' || scope.row.certificate == '有' ? '有' : '无'}}
                    </template>
                </el-table-column> -->
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'territory' && item.is_show"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                    min-width="120"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'id_card_number' && item.is_show"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                    min-width="120"
                >
                <template slot-scope="scope">
					{{scope.row.id_card_number || '-'}}
				</template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'alipay_num' && item.is_show"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                    min-width="120"
                >
                <template slot-scope="scope">
					{{scope.row.alipay_num || '-'}}
				</template>
                </el-table-column>
                <!-- <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'mon_num' && item.is_show"
                    min-width="150"
                    align="left"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                ></el-table-column> -->
                <el-table-column
                    v-if="item.props == 'id_card_pro_pic' && item.is_show"
                    min-width="160"
                    align="left"
                    :key="index"
                    :label="item.label"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.id_card_pro_pic" class="img-wrap" @click.stop>
                            <pre-img
                                :smallImg="scope.row.id_card_pro_pic"
                                :bigImg="scope.row.id_card_pro_pic1"
                                class="pre-img">
                            </pre-img>
                            <!-- <div v-for="(item, index) in scope.row.id_card_pro_pic" :key="index">
                                <el-image
                                    :key="index"
                                    :src="item"
                                    :preview-src-list="scope.row.id_card_pro_pic1"
                                ></el-image>
                            </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.props == 'id_card_con_pic' && item.is_show"
                    min-width="160"
                    align="left"
                    :key="index"
                    :label="item.label"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.id_card_con_pic" class="img-wrap" @click.stop>
                            <pre-img
                                :smallImg="scope.row.id_card_con_pic"
                                :bigImg="scope.row.id_card_con_pic1"
                                class="pre-img">
                            </pre-img>
                            <!-- <div v-for="(item, index) in scope.row.id_card_con_pic" :key="index">
                                <el-image
                                    :key="index"
                                    :src="item"
                                    :preview-src-list="scope.row.id_card_con_pic1"
                                ></el-image>
                            </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.props == 'certificate_pic' && item.is_show"
                    min-width="180"
                    align="left"
                    :key="index"
                    :label="item.label"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.certificate_pic" class="img-wrap" @click.stop>
                            <pre-img
                                :smallImg="scope.row.certificate_pic"
                                :bigImg="scope.row.certificate_pic1"
                                class="pre-img">
                            </pre-img>
                            <!-- <div v-for="(item, index) in scope.row.certificate_pic" :key="index">
                                <el-image
                                    :key="index"
                                    :src="item"
                                    :preview-src-list="scope.row.certificate_pic1"
                                ></el-image>
                            </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.props == 'created_at' && item.is_show"
                    min-width="160"
                    align="left"
                    :key="index"
                    :label="item.label"
                    :prop="item.props"
                    sortable="custom"
                ></el-table-column>
            </template>
            <el-table-column
                show-overflow-tooltip
                label="操作"
                align="center"
                width="100"
                fixed="right"
                v-if="checked99"
            >
                <template slot-scope="scope">
                    <el-button v-no-more-click:3000 type="primary" @click="check(scope.row)" size="small" v-if="scope.row.status == '已上传资料'">操作</el-button>
                    <span class="unfinish" v-else-if="scope.row.status == '初审通过'">待上传资料</span>
                    <span class="finish" v-else-if="scope.row.status == '已激活'">已激活</span>
                </template>
            </el-table-column>
        </el-table>
        <pagination @paginationChange="paginateChange" :total="total"></pagination>
        <agree-agent ref="agree-agent" @refresh="refresh"></agree-agent>
    </div>
</template>

<script>
import Pagination from '~/components/pagination'
import tableSet from '~/components/tableSet'
import agreeAgent from './detailPage/agree-agent'
import preImg from '~/components/pre-img'
import orderStatistics from "~/components/orderStatistics"
import { getMyInfo } from "~/api/user"
export default {
    head: {title: "代理人预注册列表"},
    components: {
        Pagination,
        tableSet,
        preImg,
        agreeAgent,
        orderStatistics
    },
    data() {
        return {
            baseUrl: global.baseurl,
            table_show: true,
            loading: false,
            tableData: [],
            current_page: 1,
            per_page: 25,
            checked99: true,
            total: 0,
            // 表头数据
            tableHeader: [
                {
                    label: '姓名',
                    props: 'name',
                    is_show: true
                },
                {
                    label: '昵称',
                    props: 'nickname',
                    is_show: true
                },
                {
                    label: '推荐人',
                    props: 'channelName',
                    is_show: true
                },
                {
                    label: '电话',
                    props: 'phone',
                    is_show: true
                },
                {
                    label: '邮箱',
                    props: 'email',
                    is_show: true
                },
                {
                    label: '从业机构',
                    props: 'organization',
                    is_show: true
                },
                {
                    label: '从业经历',
                    props: 'experience',
                    is_show: true
                },
                {
                    label: '工作年限(年)',
                    props: 'work_limit',
                    is_show: true
                },
                // {
                //     label: '代理师资格证',
                //     props: 'certificate',
                //     is_show: true
                // },
                {
                    label: '支付宝账号',
                    props: 'alipay_num',
                    is_show: true
                },
                {
                    label: '开户银行',
                    props: 'register_bank',
                    is_show: true
                },
                {
                    label: '银行卡号',
                    props: 'bank_card',
                    is_show: true
                },
                {
                    label: '擅长领域',
                    props: 'territory',
                    is_show: true
                },
                // {
                //     label: '预估月处理单数',
                //     props: 'mon_num',
                //     is_show: true
                // },
                {
                    label: '身份证号',
                    props: 'id_card_number',
                    is_show: true
                },
                {
                    label: '身份证正面照片',
                    props: 'id_card_pro_pic',
                    is_show: true
                },
                {
                    label: '身份证反面照片',
                    props: 'id_card_con_pic',
                    is_show: true
                },
                {
                    label: '代理师资格证照片',
                    props: 'certificate_pic',
                    is_show: true
                },
                {
                    label: '申请时间',
                    props: 'created_at',
                    is_show: true
                }
            ],
            showFilter: false,
            showFilterCondition: false,
            // 筛选条件
            conditionForm: {
                condition: []
            },
            sort_params: {},
            search_params: {},
            myInfo: {
                preregistration: 0
            }
        }
    },

    computed: {
        tableHeight() {
            let height = 1000
            if (process.client) {
                height = window.innerHeight - 202
            }
            return height
        },
        selectHead() {
            let arr = this.tableHeader.filter(v => v.props != 'id_card_pro_pic' && v.props != 'id_card_con_pic' && v.props.props != 'certificate_pic')
            return arr
        }
    },

    watch: {
        tableData: {
            handler: function(val) {
                val.forEach(v => {
                    v.id_card_pro_pic = []
                    v.id_card_pro_pic1 = []
                    v.id_card_con_pic = []
                    v.id_card_con_pic1 = []
                    v.certificate_pic = []
                    v.certificate_pic1 = []
                    if (v.certificate_thumb && v.certificate_thumb.indexOf('means') > -1) {
                        v.certificate_pic.push(this.baseUrl + '/storage/upload/' + v.certificate_thumb)
                        if (v.certificate && v.certificate.indexOf('means') > -1) {
                            v.certificate_pic1.push(this.baseUrl + '/storage/upload/' + v.certificate)
                        }
                    }
                    if (v.id_card_thumb) {
                        let obj = JSON.parse(v.id_card_thumb)
                        v.id_card_pro_pic.push(this.baseUrl + '/storage/upload/' + obj.pro)
                        v.id_card_con_pic.push(this.baseUrl + '/storage/upload/' + obj.con)
                        if (v.id_card) {
                            let obj = JSON.parse(v.id_card)
                            v.id_card_pro_pic1.push(this.baseUrl + '/storage/upload/' + obj.pro)
                            v.id_card_con_pic1.push(this.baseUrl + '/storage/upload/' + obj.con)
                        }
                    }
                })
            },
            immediate: true
        }
    },

    created() {
        this.getTableData()
    },

    methods: {
        async getMyinfo (params) {
            let myInfo = await getMyInfo(this.$axios, params);
            if (myInfo.data.status == 'success') {
                this.$store.commit("setRoleInfo",myInfo.data.data)
                this.$store.commit("setUser",myInfo.data.data)
                this.myInfo = myInfo.data.data
                this.roleID = this.myInfo.role_id
            }
        },
        paginateChange(params) {
            this.per_page = params.perPage
            this.current_page = params.page
            this.getTableData()
        },
        refresh() {
            this.getTableData()
        },
        headerSet(data) {
            if(data.every(v => v.is_show == false)) {
               this.checked99 = false
            }
            if (data.some(v => v.is_show == true)) {
               this.checked99 = true
            }
            this.table_show = false
            this.tableHeader = data
            this.$nextTick(() => {
                this.table_show = true
            })
        },
        // 获取表格数据
        getTableData(args) {
            let params = {
                perPage: this.per_page,
                page: this.current_page,
                status: '待初审,初审通过,已上传资料'
            }
            params = {...params, ...this.sort_params, ...this.search_params}
            if(args) {
                params = {...params, ...args}
            }
            this.loading = true
            this.$axios.get('/api/agent',{
                params: params
            }).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.page.total
                    this.loading = false
                    this.getMyinfo()
                } else {
                    this.loading = false
                    this.getMyinfo()
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        // 审核操作
        check(row) {
            this.$refs['agree-agent'].showOn(row)
        },
        refused(row) {
            this.$prompt('拒绝申请理由', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern:  /\S/,
                inputErrorMessage: '请输入请输入拒绝申请理由'
            }).then(({ value }) => {
                if (value.length > 50) {
                    return this.$message({
                        type: 'error',
                        message: '拒绝申请理由最多50个字'
                    })
                }
                let params = {
                    status: row.status,
                    reason: value
                }
                this.refusedPost(row.id, params)
            }).catch(() => {});
        },
        refusedPost(id, params) {
            this.$axios.put(`/api/agent/${id}/audit_failed`, params).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '拒绝申请成功'
                    })
                    this.current_page = 1
                    this.getTableData()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        // 表头排序
        tableSort(column) {
            let params = {
                sort_str: column.prop,
            }
            if (column.order === 'descending') {
                params.sort_str = column.prop
                params.sort_order = 'desc'
            } else if (column.order === 'ascending'){
                params.sort_str = column.prop
                params.sort_order = 'asc'
            } else {
                params = {}
            }
            this.sort_params = params
            this.getTableData()
        },
        // 每页数修改
        handleSizeChange(size) {
            this.per_page = size
            this.current_page = 0
            this.getTableData()
        },
        // 当前页修改
        handleCurrentChange(page) {
            this.current_page = page;
            this.getTableData()
        },
        // 添加条件筛选
        addFilterCondition(item) {
            let filterItem = {
                value: '',
                label: item.label,
                parameter: item.props,
                key: Date.now()
            }

            if (this.conditionForm.condition.length > 0) {
                let conditionlabels = []
                for (let i = 0; i < this.conditionForm.condition.length; i++) {
                    conditionlabels.push(this.conditionForm.condition[i].label)
                }
                let Check = conditionlabels.indexOf(item.label)
                Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
            } else {
                this.conditionForm.condition.push(filterItem)
            }

            this.showFilterCondition = false;
        },
        removeDomain(item) {
            let index = this.conditionForm.condition.indexOf(item)
            if (index !== -1) {
                this.conditionForm.condition.splice(index, 1)
            }
            if (item.label === '提交时间') {
                this.submitTime = []
            }
            let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
            let params = {}
            props.forEach(v => {
                params[v.parameter] = v.value
            })
            if (params.created_at) {
                params.createdTime = params.created_at
                delete params.created_at
            }
            this.search_params = params
            this.getTableData()
        },
        submitsearch(formName) {
            let that = this
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
                    let params = {}
                    props.forEach(v => {
                        params[v.parameter] = v.value
                    })
                    if (params.created_at) {
                        params.createdTime = params.created_at
                        delete params.created_at
                    }
                    this.current_page = 1
                    this.$refs['agent-table'].clearSort()
                    this.sort_params = {}
                    this.search_params = params
                    this.getTableData()
                    this.showFilterCondition = false
                    this.showFilter = false
                }
            })
        },
        resetForm(formName) {
            this.conditionForm.condition.forEach(v => {
                if (v.value) {
                    v.value = null
                }
            });
            this.search_params = {}
            this.sort_params = {}
            this.$refs['agent-table'].clearSort()
            this.$nextTick(() => {
                this.$refs[formName].clearValidate()
            })
            // this.getTableData()
            // this.showFilterCondition = false
            // this.showFilter = false
        },
    }
}
</script>

<style lang="less" scoped>
.agent-review {
    /deep/.el-table {
		.img-wrap {
			display: flex;
            justify-content: center;
            > div {
                height: 23px;
            }
			.el-image {
                width: 23px;
				height: 23px;
			}
		}
	}
    /deep/.ivu-poptip-inner {
		min-width: 450px;
		// height: 300px;
		overflow-y: scroll;
	}

	/deep/.poptip-condition .ivu-poptip-inner {
		min-width: 180px;
	}

	.demo-dynamic {
		padding-left: 10px;

		.el-form-item {
			margin-bottom: 12px;
		}

		.el-input {
			width: 240px;
		}

		.el-date-editor {
			width: 240px;
		}

		.el-button {
			padding: 9px 15px;
			vertical-align: baseline;
		}

		.el-form-item__error {
			padding-top: 0;
		}
	}

	.poptip-condition {
		display: block;
		margin-top: 10px;

		.poptip-condition-item {
			line-height: 25px;
			cursor: pointer;
		}

		.poptip-condition-add {
			font-size: 14px;
		}
	}

	.btns {
		margin-top: 10px;
	}
}
</style>
